<template>
  <div class="cluster systemContent">
    <a-card style="width:100%">
      <p slot="title" class="cardTitles">
        <span>系统设置</span>
      </p>
      <div class="main-content">
        <a-tabs type="card">
          <a-tab-pane key="1" tab="短信设置">
            <div class="tab-content">
              <div style="margin-top:10px">
                <a-table
                  :columns="columns"
                  :data-source="data"
                  bordered
                  :pagination="false"
                  @change="changePage"
                >
                  <template slot-scope="text,record" slot="action">
                    <a class="tools" @click="audit(record)">短信模板设置</a>
                  </template>
                </a-table>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="其他设置">
            <div class="tab-content"></div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>
<script>
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {}
  };
  if (index === 4) {
    obj.attrs.colSpan = 0;
  }
  return obj;
};

const data = [
  {
    key: "1",
    name: "1",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "1",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "2",
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "2",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park"
  },
  {
    key: "5",
    name: "3",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park"
  }
];

export default {
  data() {
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {}
          };
          if (index === 2) {
            obj.attrs.rowSpan = 2;
          }
          if (index === 3) {
            obj.attrs.rowSpan = 0;
          }
          return obj;
        }
      },
      {
        title: "Age",
        dataIndex: "age",
      },
      {
        title: "Home phone",
        colSpan: 2,
        dataIndex: "tel",
      },
      {
        title: "Phone",
        colSpan: 0,
        dataIndex: "phone",
      },
      {
        title: "Address",
        dataIndex: "address",
      }
    ];
    return {
      data,
      columns
    };
  }
};
</script>

<style lang="stylus" scoped>
.systemContent {
  background: red;
}
</style>